<template>
  <scroll-view scroll-y style="height: 100%">
    <view class='Kemu4-container'>
      <SearchInput :hot="hot" v-if="topBar.style !== 'custom'"></SearchInput>
      <view :class="['carType', 'type2_4']" v-if="carType===2" @click="goTo('carType_2')"></view>
      <view class="flex" style="margin-top: 40rpx">
        <view class="small_icon_row">
          <view class="small_icon" @click="goTo('pdf_detail')">
            <view class="icon item5"></view>
            <view class="label">驾考秘籍</view>
          </view>
          <view class="small_icon" @click="goTo('toTag')">
            <view class="icon item6"></view>
            <view class="label">考点练习</view>
          </view>
          <view class="small_icon" @click="goTo('icon_category')">
            <view class="icon item7"></view>
            <view class="label">图标大全</view>
          </view>
          <view class="small_icon" @click="goTo('location_question')">
            <view class="icon item8"></view>
            <view class="label">地方题库</view>
          </view>
        </view>
        <view class="big_icon_row">
          <view class="big_icon item1" @click="goTo('shunxu')">
            <view class="big_icon_quan">
              <view class="icon">
                <view class="label">顺序练习</view>
                <view class="sub_label">{{ descFormat('shunxu') }}</view>
              </view>
            </view>
          </view>
          <view class="big_icon item2">
            <view class="big_icon_quan" @click="goTo('moni')">
              <view class="icon">
                <view class="label">模拟考试</view>
                <view class="sub_label">快速冲刺</view>
              </view>
            </view>
          </view>
        </view>
        <view class="small_icon_row">
          <view class="small_icon" @click="goTo('jingxuan', '精选题库')">
            <view class="icon item1"></view>
            <view class="label">精选500题</view>
          </view>
          <view class="small_icon" @click="goTo('tag_10045', '易错题')">
            <view class="icon item2"></view>
            <view class="label">易错题</view>
          </view>
          <view class="small_icon" @click="goTo('kaochang_moni_enter')">
            <view class="icon item4"></view>
            <view class="label">真实考场模拟</view>
          </view>
          <view class="small_icon" @click="goTo('mine_wrong')">
            <view class="icon item3" style="width: 100upx; height: 100upx"></view>
            <view class="label">我的错题</view>
          </view>
        </view>
      </view>
      <image src="https://down.qwdata.vip/app_icon/1702746533199" mode="widthFix" class="monikaochang"
             @click="goTo('kaochang_moni_enter')"></image>
    </view>
  </scroll-view>
</template>

<script>
import {mapGetters, mapActions} from 'vuex'
import BannerView from "@/pages/home/BannerView.vue";
import SearchInput from "@/pages/home/SearchInput.vue";

export default {
  name: 'Kemu4',
  props: ['hot'],
  components: {
    SearchInput
  },
  data() {
    return {}
  },
  computed: {
    ...mapGetters(['topBar', 'carType']),
    ...mapGetters('question', ['kemu4']),
  },
  methods: {
    descFormat(type) {
      const {
        wrongTotalCount = '-',
        collectTotalCount = '-',
        shunxuFinishedCount = '-',
        shunxuTotalCount = '-',
        huocheTotalCount,
        kecheTotalCount,
        tagCount = '-'
      } = this.kemu4;
      if (type === 'mine_wrong') {
        return '已收录' + wrongTotalCount + '道'
      }
      if (type === 'mine_collect') {
        return '已收录' + collectTotalCount + '道'
      }
      if (type === 'shunxu') {
        if (this.carType === 1) {
          return shunxuFinishedCount + '/' + shunxuTotalCount
        } else if (this.carType === 2) {
          return shunxuFinishedCount + '/' + (shunxuTotalCount + huocheTotalCount)
        } else if (this.carType === 3) {
          return shunxuFinishedCount + '/' + (shunxuTotalCount + kecheTotalCount)
        }
      }
      if (type === 'kaodian') {
        return '共' + tagCount + '考点'
      }
    },
    goTo(type, title) {
      console.log('goTo', type, title)
      if (type === 'mine_collect') {
        uni.navigateTo({
          url: '/pages/mine_collect/mine_collect?kemu=4'
        });
      } else if (type === 'icon_category') {
        uni.navigateTo({
          url: '/pages/icon_category/icon_category?kemu=1'
        })
      } else if (type === 'suji') {
        uni.navigateTo({
          url: '/pages/shorthand/shorthand?kemu=1'
        })
      } else if (type === 'mine_wrong') {
        uni.navigateTo({
          url: '/pages/mine_wrong/mine_wrong?kemu=4'
        });
      } else if (type === 'toTag') {
        uni.navigateTo({
          url: '/pages/tag/tag?kemu=4'
        });
      } else if (type === 'moni') {
        uni.navigateTo({
          url: '/pages/exam_start/exam_start?kemu=4'
        });
      } else if (type === 'kaochang_moni_enter') {
        uni.navigateTo({
          url: '/pages/kaochang_moni_enter/kaochang_moni_enter?kemu=4'
        });
      } else if (type === 'shunxu') {
        uni.navigateTo({
          url: '/pages/lianxi_start/lianxi_start?kemu=4&type=shunxu&title=顺序练习',
        });
      } else if (type === 'location_question') {
        uni.navigateTo({
          url: '/pages/location_question/location_question?kemu=4',
        });
      } else if (type === 'pdf_detail') {
        uni.navigateTo({
          url: '/pages/pdf_detail/pdf_detail?id=C000009'
        })
      } else if (type === 'carType_2') {
        uni.navigateTo({
          url: '/pages/detail/detail?kemu=4&type=' + type + '&title=货运资格证专题',
        });
      } else {
        uni.navigateTo({
          url: '/pages/detail/detail?kemu=4&type=' + type + '&title=' + title,
        });
      }
    }
  }
}
</script>

<style scoped lang='scss'>
.Kemu4-container {
  padding-bottom: 100rpx;
  .carType {
    height: 162rpx;
    color: #fff;
    //background-color: #007aff;
    margin: 25rpx 36rpx 0 36rpx;
    margin-bottom: -30rpx;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    border-radius: 30rpx;

    &.type2 {
      background-image: url("@/static/carType/carType2.png");
    }

    &.type3 {
      background-image: url("@/static/carType/carType3.png");
    }

    &.type2_4 {
      background-image: url("http://down.qwdata.vip/app_icon/1715321894921");
    }
  }
  .monikaochang {
    margin-left: 36upx;
    margin-top: 25upx;
    width: calc(100vw - 72upx);
  }

  .kaochang-moni {
    margin: 30rpx 36rpx 0 36rpx;
    width: 678rpx;
    height: 352rpx;
    background-image: url("http://down.qwdata.vip/app_icon/1686649026811");
    background-repeat: no-repeat;
    background-size: contain;
    margin-bottom: 100rpx;
  }

  ::v-deep .search-container {
    margin: 10px 20px 0;
    height: 82upx;
  }

  .big_icon_row {
    display: flex;
    flex-direction: column;

    .big_icon {
      display: flex;
      justify-content: center;
      align-items: center;

      &.item1 {
        flex: 1;

        .big_icon_quan {
          border: 16rpx solid #E7EBFF;
        }

        .icon {
          background: linear-gradient(142deg, #6381FD 0%, #3F63F8 100%);
        }
      }

      &.item2 {
        flex: 1;

        .big_icon_quan {
          border: 16rpx solid #D2FFEF;
        }

        .icon {
          background: linear-gradient(145deg, #0EE398 0%, #00C580 100%);
        }
      }

      .big_icon_quan {
        width: 220rpx;
        height: 220rpx;
        border-radius: 200rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 10rpx solid #007aff;
      }

      .icon {
        width: 195rpx;
        height: 195rpx;
        border-radius: 200rpx;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 16px;

        .label {
          font-weight: bold;
        }

        .sub_label {
          font-size: 13px;
          margin-top: 8rpx;
          opacity: 0.9;
        }
      }
    }
  }

  .small_icon_row {
    display: flex;
    flex-direction: column;
    flex: 1;
    align-items: center;

    .small_icon {
      width: 180rpx;
      display: flex;
      flex-direction: column;
      align-items: center;

      .icon {
        width: 100rpx;
        height: 112rpx;
        background-size: cover;
        margin-top: 20rpx;

        &.item1 {
          background-image: url("@/static/home/icon_jingxuan.png");
        }

        &.item2 {
          background-image: url("@/static/home/icon_mijuan.png");
        }

        &.item3 {
          background-image: url("@/static/mine/cuoti_icon.png");
        }

        &.item4 {
          background-image: url("@/static/home/icon_zhenshi.png");
        }

        &.item5 {
          background-image: url("@/static/home/icon_shipin.png");
        }

        &.item6 {
          background-image: url("@/static/home/icon_kaodian.png");
        }

        &.item7 {
          background-image: url("@/static/home/icon_tubiao.png");
        }

        &.item8 {
          background-image: url("@/static/home/icon_difangti.png");
        }
      }

      .label {
        font-size: 28rpx;
        color: rgba(102, 102, 102, 1);
        margin-bottom: 20rpx;
      }
    }
  }
}
</style>
